<template>
    <transition appear name="custom-classes-transition"
        enter-active-class="animate__animated animate__faster  animate__fadeInLeft "
        leave-active-class="animate__animated animate__faster animate__fadeOutLeft ">
        <div class="left_box" id="menu">
            <div class="content">
                <slot></slot>

            </div>
        </div>
    </transition>
</template>

<script setup lang="ts">
import { useAnimateStore } from '@/stores/animate'

import { computed, ref, toRefs } from "vue"
import { useAppStore } from '@/stores/modules/app';
const { showMenuLeft } = toRefs(useAppStore());
const { setshowMenuLeft } = useAppStore();

const animatestore = useAnimateStore();
const animate = computed(() => animatestore.$state.Animate)
const showmenu = ref<Boolean>(true)
const handleMenu = () => {
    // if (showmenu.value == true) {
    //     showmenu.value = false
    // } else {
    //     showmenu.value = true
    // }
    setshowMenuLeft()
}
</script>

<style scoped lang="scss">
.left_box {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 6vw;
    height: 93.9vh;
    top: 6vh;
    background: rgba(31, 31, 31, 1);
    z-index: 9;

    .content {
        width: 100%;
        height: 100%;
        // border: 1px solid rgba(255, 255, 255, 0.527);
        box-sizing: border-box;
        position: relative;
        display: flex;
        padding: 10px;
        flex-direction: column;

        box-sizing: border-box;

        .left-btn {
            cursor: pointer;
            position: absolute;
            right: -20px;
            top: 50%;
            transform: translateY(-50%);
        }

    }
}

.showmenu {
    position: absolute;
    top: 54%;
    cursor: pointer;
    transform: translateY(-50%);
    z-index: 9;

    img {
        width: 24px;
    }
}
</style>